<template>
    <div>
        <van-nav-bar title="收益记录" left-arrow @click-left="backSup"></van-nav-bar>
        <van-tabs
                class="order-tab"
                v-model="active"
                title-active-color="FBA86"
                color="#FBA86"
                @click="changeStatus"
        >
            <van-tab title="收益记录"></van-tab>
            <van-tab title="股权记录"></van-tab>
            <van-tab title="积分收益"></van-tab>
            <ul>
                <li v-for="(item,index) in list" :key="index">
                    <p>
                        <span>{{item.originDesc}}</span>
                        <span class="money">¥{{item.amount}}</span>
                    </p>
                    <p>
                        <span>{{item.createTime}}</span>
                        <span class="status">{{item.typeDesc}}</span>
                    </p>
                </li>
            </ul>
            <div v-if="list.length==0" class="none">
                <img src="../../assets/imgList/none.jpg"/>
                <p>这里什么也没有</p>
            </div>
        </van-tabs>
    </div>
</template>

<script>
    import {Cell, Row, Col, List, Card, Tabs, Tab, Toast, Tag} from "vant";
    import api from "@/utils/restful";

    export default {
        components: {
            [Cell.name]: Cell,
            [Row.name]: Row,
            [Col.name]: Col,
            [List.name]: List,
            [Card.name]: Card,
            [Tabs.name]: Tabs,
            [Tab.name]: Tab,
            [Toast.name]: Toast,
            [Tag.name]: Tag
        },
        data() {
            return {
                active: 0,
                list: []
            };
        },
        mounted() {
            this.getEarningsRecord();
        },
        methods: {
            changeStatus(index) {
                if (this.active == 0) {
                    this.getEarningsRecord();
                } else if (this.active == 1) {
                    this.getStockRecord();
                } else {
                    this.getIntegralRecord();
                }
            },
            getEarningsRecord() {
                this.$axios({
                    method: "get",
                    url: api.balanceEarningsRecord,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    console.log(res);
                    this.list = res.data;
                });
            },
            getIntegralRecord() {
                this.$axios({
                    method: "POST",
                    url: api.integralLogList,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    this.list = res.data;
                });
            },
            getStockRecord() {
                this.$axios({
                    method: "POST",
                    url: api.equityLogList,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    this.list = res.data;
                });
            },
            backSup() {
                this.$router.go(-1);
            }
        }
    };
</script>

<style lang="less" scoped>
    @import "~style/common.less";

    ul {
        li {
            height: 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 14px;
            border-bottom: 1px solid #f2f2f2;

            p {
                padding: 0 30px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .money {
                    font-size: 16px;
                    font-weight: 500;
                    color: #000;
                }

                .status {
                    color: @priColor;
                }
            }
        }
    }

    .none {
        height: calc(100vh - 90px);
        box-sizing: border-box;
        padding-top: 100px;
        text-align: center;

        img {
            width: 200px;
            height: 200px;
        }

        p {
            margin-top: 20px;
            padding: 15px 0;
            font-size: 16px;
            color: #999;
        }
    }
</style>

